<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <script type="text/javascript" src="./script/rem.js"></script>
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript" src="./script/jquery.min.js"></script>
  <script type="text/javascript" src="./script/base.js"></script>
  <script type="text/javascript" src="./script/doT.min.js"></script>
</head>

<body>

  <div class="index-box-bg" style="display: none;" id="pay_alert">
    <div class="pay-box">
      <h3 id="all_money">即将支付400金币</h3>
      <div class="pay-box-btn">
        <span onclick="pay_alert_cancel();">取消</span>
        <span onclick="pay_alert_confirm();">支付</span>
      </div>
    </div>
  </div>

  <header class="head" style="padding-top:0.4rem;">
    <div class="head-l" tapmode onclick="closeWin()"><i class="fa fa-angle-left"></i></div>
    <h3>提交订单</h3>
    <div class="head-r"></div>
  </header>
  <div class="head-d" style="padding-top:0.4rem;"></div>

  <!-- 地址 -->
  <div class="order-address" tapmode onclick="address()" id='adress'>
    <img src="image/address-icon.png">
        <!-- <dl>
        <dt>张华<span>15487878728</span></dt>
        <dd>辽宁省沈阳市铁西区建设大路建设东路57号
1202室</dd>
</dl> -->
<p>添加收货地址</p>
<i class="fa fa-chevron-right"></i>
</div>
<div class="order-address-d mb20"></div>

<!-- 商品 -->
<div class="shop-order-goods mb20" id='list'>
  <!-- <h3>选购商品</h3> -->
  <ul>
    <li>
      <img src="image/classify.jpg">
      <dl>
        <dt>澳大利亚·毛孔脏东西浮出来·麦卢...</dt>
        <p>规格：套装</p>
        <dd>
          ￥166.00
          <span>x3</span>
        </dd>
      </dl>
    </li>
    <li>
      <img src="image/classify.jpg">
      <dl>
        <dt>澳大利亚·毛孔脏东西浮出来·麦卢...</dt>
        <p>规格：套装</p>
        <dd>
          ￥166.00
          <span>x3</span>
        </dd>
      </dl>
    </li>
  </ul>
</div>

<div class="list-text-r mb20">
  <ul>
    <li>
      配送费
      <!-- <span>快递</span> -->
      <span>到付</span>
      <!-- <i class="fa fa-angle-right"></i> -->
    </li>
  </ul>
</div>
<!-- <div class="text-center mb20">运费到付自理</div> -->

<!-- <div class="list-text-r mb20" tapmode onclick="prepay_for()">
  <ul>
    <li>
      支付方式
      <span><div id="prepay_id">请选择支付方式</div></span>
      <i class="fa fa-angle-right"></i>
    </li>
  </ul>
</div> -->

<div class="list-text-r">
  <ul>
    <li onclick="call()">
      客服电话
      <p>400-0247774</p>
      <i class="fa fa-angle-right"></i>
    </li>
  </ul>
</div>

<div class="cart-d-t"></div>
<div class="cart-d">
  <div class="cart-d-l">
    <p>合计：<span id='total'>￥0</span></p>
  </div>
  <div class="cart-d-r" tapmode onclick="open_pay_alert()">提交订单</div>
</div>


<script type="text/template" id="template">
  <!-- <h3>选购商品</h3> -->
  <ul>
    {{~it.cart:value:index}}
    <li>
      <img src="{{=value.product.image}}">
      <dl>
        <dt>{{=value.product.title}}</dt>
        <p>规格：{{=value.product.unit_title}}</p>
        <dd>
          {{=value.product.coin}}金币
          <span>x{{=value.number}}</span>
        </dd>
      </dl>
    </li>
    {{~}}
  </ul>
</script>

<script type="text/template" id="template_adress">
  <img src="image/address-icon.png">
  {{? it != null}}
  <dl>
    <dt>{{=it.name}}<span>{{=it.phone}}</span></dt>
    <dd>{{=it.district[0].title}} {{=it.district[1].title}} {{=it.district[2].title}} {{=it.address}}</dd>
  </dl>
  {{??}}
  <p>添加收货地址</p>
  <i class="fa fa-chevron-right"></i>
  {{?}}

</script>

</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/javascript" src="./script/index.js"></script>
<script type="text/javascript">
  apiready = function() {
    token = $api.getStorage('token');
    token = 'Bearer ' + token;
    getData();

  }

  var prepay;

  function getData() {
    var ids = api.pageParam.ids;

    api.ajax({
      url: webAddress+'/api/order-coin/preview',
      method: 'get',
      headers: {
        'Authorization': token
      },
      data: {
        values: {
          cart_id: ids
        },
      }
    },function(ret, err){
      if (ret) {
              // alert( JSON.stringify( ret ) );
              var template = $api.byId('template');
              var dotFn = doT.template(template.innerHTML);
              var html = dotFn(ret);
              var list = $api.byId('list');
              $api.html(list, html);


              var template = $api.byId('template_adress');
              var dotFn = doT.template(template.innerHTML);
              var html = dotFn(ret.address[0]);
              var html='';
              if (ret.address != "") {
                address_id = ret.address[0].id;
                html = dotFn(ret.address[0]);
                var list = $api.byId('adress');
                $api.html(list, html);
              }else{
                address_id = "";
              }
              allmoney = parseInt(ret.cart[0].number) *parseInt(ret.cart[0].product.coin);
              allprice_current = parseInt(ret.cart[0].number) *parseInt(ret.cart[0].product.price_current);
              $('#total').text(+allmoney+'金币');

            } else {
              // alert( JSON.stringify( err ) );
            }
          });

  }

  function prepay_for(){
    api.actionSheet({
      title: '请选择支付方式',
      cancelTitle: '取消',
      buttons: ['金币', '赚石']
    }, function(ret, err) {
      prepay = ret.buttonIndex;
      if(prepay == 1){
        $('#prepay_id').text('金币');
        $('#total').text(+allmoney+'金币');
      }else if(prepay == 2){
        $('#prepay_id').text('赚石');
        $('#total').text(+allprice_current+'赚石');
      }
    });
  }

  function call() {
    api.call({
      type: 'tel_prompt',
      number: '400-0247774'
    });
  }

  // 触发弹窗
  function open_pay_alert(){
    $('#all_money').html('即将支付'+allmoney+'金币');
    $api.byId('pay_alert').style.display = "block";
  }

  // 取消支付
  function pay_alert_cancel(){
    $api.byId('pay_alert').style.display = "none";
  }

  // 确认支付
  function pay_alert_confirm() {
   shop_order_pay();
 }

 function shop_order_pay() {
      // alert(prepay);
      if(address_id == ""){
        api.toast({
          msg: "请选择收货地址",
          duration: 2000,
          location: 'bottom'
        });
        return false;
      } 
      // if(prepay  == undefined || prepay == 3){
      //   api.toast({
      //     msg: '请选择支付方式',
      //     duration: 2000,
      //     location: 'bottom'
      //   });
      // }else if(prepay == 1){   
      //   var pay_method = 2;
      // }else if(prepay == 2){       
      //   var pay_method = 1;
      // }

      var ids = api.pageParam.ids;
      api.ajax({
        url: webAddress+'/api/order-coin/create',
        method: 'post',
        headers: {
          'Authorization': token
        },
        data: {
          values: {
            cart_id: ids,
            address_id:address_id,
            // pay_method: pay_method,
            pay_method: 2,
          },
        }
      },function(ret, err){
        if (ret) {
          api.execScript({
            name: 'root',
            frameName: 'shop',
            script: 'get_cart();'
          });
            // console.log(JSON.stringify(ret));
            // alert( JSON.stringify( ret ) );
            // if(pay_method == 1){
            //   pay(ret.price,ret.id);
            // }else if(pay_method == 2){


              api.openWin({
                name: 'pay_success',
                url: './pay_success.html',
                pageParam: {
                  name: 'test'
                }
              });

              // api.toast({
              //     msg: '支付成功',
              //     duration: 2000,
              //     location: 'bottom',
              //     global: true,
              // });
              // api.closeToWin({
              //     name: 'month_classify'
              // });
            // }
          } else {
              // alert( JSON.stringify( err ) );
              if (err.statusCode == 400) {
                api.toast({
                  msg: err.body.message,
                  duration: 2000,
                  location: 'bottom'
                });
                return false;
              }
            }
          });
    }


    function pay(price,order_id) {

      api.openWin({
        name: 'shop_order_pay_password',
        url: './shop_order_pay_password.html',
        pageParam: {
         price: price,
         order_id:order_id,
       }
     });


    }

    function address() {
        // api.openWin({
        //     name: 'address',
        //     url: './address.html',
        // });

        api.openWin({
          name: 'address',
          url: './address.html',
          pageParam: {
            name: 'shop_order_details'
          }
        });

      }

      function changeAdress(id) {
        address_id = id;
        api.ajax({
          url: webAddress + '/api/address/'+id+'/detail',
          method: 'get',
          data: {
            values: {
            // name: 'haha'
          },
        },
        headers: {
          Authorization: token,
          Accept: 'application/json',
        },
      },function(ret, err){
        if (ret) {
      //  console.log(JSON.stringify(ret));
      var template = $api.byId('template_adress');
      var dotFn = doT.template(template.innerHTML);
      var html = dotFn(ret.data);
      var list = $api.byId('adress');
      $api.html(list, html);
    } else {
      // alert( JSON.stringify( err ) );
    }
  });
      }

      function closeWin() {
        api.closeWin({});
      }
    </script>

    </html>
